<template>
    <div>

        <ul class="menu-inner">
            <template v-for="(item, index) in props.routes">
                <el-menu-item name="el-menu-item" v-if="!item.children.length && !item.meta.hidden" @click="navAct(item)"
                    :key="item.path" :index="item.path ? item.path : ''">
                    <i :class="item.meta.icon"></i>
                    <!-- {{ item }} -->
                    {{ item.path }}
                    <span slot="title">{{ item.meta.title }}</span>
                    <span class="isActive" v-if="false">{{ $route.path == item.path }}</span>
                </el-menu-item>
                <el-sub-menu index="1-4" v-if="item.children.length > 0">
                    <template #title>{{ item.meta.title }}</template>
                    <!-- <el-menu-item index="1-4-1">item one</el-menu-item> -->
                    <childRoute :routes="item.children" />
                </el-sub-menu>
                <!-- 此菜单下还有子菜单 -->

            </template>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';

const props = defineProps(['routes'])
onMounted(() => {
    // console.log(props);

})
const navAct = (item) => {
    console.log(item, '333333333333');

}
</script>

<script lang="ts">
export default {
    name: 'childRoute'
}
</script>

<style lang="scss" scoped></style>
